<template>
  <view class="user-item">
    <!-- <image 
      class="user-avatar" 
      :src="user.avatar || '/static/default-avatar.png'" 
      mode="aspectFill"
    ></image> -->
    <view class="user-info">
      <text class="user-name">{{ user.name }}</text>
      <text class="user-email">{{ user.email }}</text>
    </view>
    <view class="user-actions">
      <!-- 作用域插槽：向父组件传递user数据 -->
      <slot name="actions" :user="user"></slot>
    </view>
  </view>
</template>

<script setup>
// 定义组件的 props
defineProps({
  user: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
</script>

<style scoped lang="scss">
.user-item {
  display: flex;
  align-items: center;
  padding: $uni-spacing-col-base 0;
  border-bottom: 1rpx solid $uni-border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: $uni-border-radius-circle;
  margin-right: $uni-spacing-row-base;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: $uni-font-size-base;
  font-weight: bold;
  color: $uni-text-color;
  margin-bottom: $uni-spacing-col-sm;
}

.user-email {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}

.user-actions {
  display: flex;
}
</style>